<!--批量导入用户步骤一-->
<template>
  <a-row :style="{width: '100%',padding: '2em'}">
    <div class="page_title">批量导入一</div>
    <div class="show_content">
      <a-steps :current="userState.current" :style="{marginLeft:'-32%'}">
        <a-step>
          <template slot="title">
            步骤一
          </template>
          <span slot="description">上传Excel表格文件</span>
        </a-step>
        <a-step title="步骤二" description="检查Excel表格识别结果确认导入" />
      </a-steps>
      <a-row style="width: 100%">
        <div style="padding: 1em;">
          <a-table :data-source="data" style="margin-top: 2em; width: 100%;" bordered>
            <a-table-column width="25%" title="文件名" data-index="file" />
            <a-table-column width="25%" title="上传人" data-index="name" />
            <a-table-column width="25%" key="key" title="操作">
              <template slot-scope="record">
                <span>
                  <a :href="record.downloadFileUrl" target="_blank">下载</a>
                  <a-divider type="vertical" />
                  <a-upload :accept="record.uploadFileType" name="file" @change="uploadFile($event)" :action="record.uploadUrl"
                            :data="uploadParam">
                    <a>上传</a>
                  </a-upload>
                </span>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </a-row>
    </div>
    <div style="color: #ff0000; text-align: left">
      <p>注意：</p>
      <P>请下载模板导入数据后再上传文件。</P>
    </div>
  </a-row>
</template>

<script>

import { mapState } from 'vuex'

export default {
  name: "BatchImportOne",
  data() {
    return {
      data:[
        {
          key: '1',
          file: '课程目标模板',
          name: '林枫',
          downloadFileUrl: 'http://localhost:8082/download/coutar',
          uploadFileType: '.docx,doc',
          uploadUrl: 'http://localhost:8082/upload/coutar',
        },
        {
          key: '2',
          file: '毕业要求指标点模板',
          name: '林枫',
          downloadFileUrl: 'http://localhost:8082/download/graduate',
          uploadFileType: '.docx,doc',
          uploadUrl: 'http://localhost:8082/upload/grad',
        }
      ],
      uploadParam:{}
    }
  },
  mounted() {
    console.log(this.accessState.collegeId)
    this.uploadParam={
      collegeId:this.accessState.collegeId
    }
  },
  methods: {
    uploadFile(data){ //上传Excel文件
      if(data.file.status==='done'&&data.fileList.len!==0&&data.file.response.code===1){
        this.$message.info('上传文件成功')
        this.$store.commit('user/SET_TEACHER_UPLOAD',data.file.response.data)
      }else if(data.file.response.code===0){
        this.$message.error(data.file.response.msg);
      }
    },
  },
  computed: {
    ...mapState({
      'accessState': 'access',
      'userState':'user'
    }),
  }
}
</script>

<style scoped>
.show_content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4em;
}
.page_title{
  font-weight: bolder;
  font-size: 1.5em;
  position: relative;
  text-align: left;
}
.button_one{
  padding: 1.5em 2em;
  line-height: 0;
  font-size: 1.5em;
  width: 12em;
}

</style>
